import React from 'react';
import ReactBootstrap4,{
    Container,
    Input,
    Button,
    CCheckbox,
    Table,
    Pagination,
    Dropdown,
    Select,
    Calendar,
    TextArea,
    Switch,
    Label,
    TabsContent,
    Tabs,
    Box,
	Radio,
	RadioGroup,
	Common,
} from '@clake/react-bootstrap4';
import {
    CTable,
	Window,
	WModal
} from '@clake/react-bootstrap4-window';
import Form from '../../common/Form';
import {GetData,ProcessData,ComboSearch} from '../../common/DataService';
class FEfcReleaseNew extends React.Component {
    constructor(props) {
        super(props);
        this.id = 'f_efc_release_new';
		this.title = 'Enter New Release';
        if (!this.props.width) {
            this.width = '760px';
        }
        if (!this.props.height) {
            this.height = '532px';
        }
		this.source = 's_efc_release_new';
        this.process = 't_efc_release';
		if (this.props.parent instanceof Window) {
            //window 窗体对像
            this.window = this.props.parent;
            //window 管理对像
            this.manage = this.window.parent;
            //传送的窗体参数
            this.params = this.window.params;
        }

		this.state = {
			data:{},
            isEdit:!!this.window?.params?.id,
		};
    }

    componentDidMount() {
		this.window.on(Window.EVT_SHOW,this.showHandler);
        this.window.on(Window.EVT_CLOSE,this.closeHandler);
		this.getData(this.window?.params?.id)
    }

    showHandler = ()=>{
        this.getData(this.window?.params?.id)
    };

    closeHandler = ()=>{
        
    };

	getData = (id) => {
		if (!id) {
			return;
		}
        let condition = {
            field:'efc_release_id',
            value: id + '',
            flag:  'eq'
        };
        this.modal.loading('Loading...');
        GetData('s_efc_release_new',1,1, [condition],null,(res)=>{
            this.modal.close();
            if (res.status) {
                if (res.data.list && res.data.list[0]) {
                    this.setState({
                        data:res.data.list[0],
                        isEdit:true,
                    });
                } else {
                    this.modal.alert('not found data');
                }
            } else {
                this.setState({
                    data:{},
                    isEdit:false,
                });
            }
        });
    };

    newData = () => {
        this.window.params = {};
        this.setState({
            data:this.form.getNew(),
            isEdit:false,
        })
    };

    saveData = () => {
        ProcessData(this.process,this.state.isEdit?'edit':'new',this.state.data,(res)=>{
            if (res.status) {
                if (!this.state.isEdit) {
                    this.window.params.id = res.data.new_id;
                }
                this.setState({
                    isEdit:true,
                },()=>{
                    this.modal.alert('save success');
                });
            } else {
                this.modal.alert('save data error:'+res.msg);
            }
        })
    };

    deleteData = ()=>{
        ProcessData(this.process,'delete',{'efc_release_id':this.window.params.id},(res)=>{
            if (res.status) {
                this.modal.alert({
                    content: 'delete success',
                    callback: ()=>{
                        this.window.close();
                    }
                });
            } else {
                this.modal.alert('save data error:'+res.msg);
            }
        })
    };


    fieldChangeHandler = (field,val,row,type,textField)=>{
        let data = this.state.data;
        if (type==='combo') {
            data[field] = row?row[field]??row[textField]:'';
			data[textField] = val;
        } else {
            data[field] = val;
        }
        this.setState({data:data});
    };
	
	sortHandler() {}

	filterHandler() {}

	open() {}

	save = ()=>{

    };

    render() {
        return (
            <Form ref={c=>this.form=c} onChange={this.fieldChangeHandler}>
                <Tabs jsxId={'TabCtl774'} sm={true} border={true} absolute={true} x={'0px'} y={'28px'} width={'760px'} height={'504px'}>
                    <TabsContent jsxId={'Release Info'} id={'Release Info'} text={'Release Info'} active={true}>
                        <Input jsxId={'efc_release_no'} field={'efc_release_no'} absolute={true} size={'xs'} x={'136px'} y={'5px'} width={'104px'} tabIndex={'0'} align={'left'} data={this.state.data?.efc_release_no}/>
                        <Label jsxId={'Label719'} sm={true} absolute={true} x={'20px'} y={'5px'} width={'108px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'EFC Release No.'}/>
                        <Input jsxId={'sub_version_no'} field={'sub_version_no'} absolute={true} size={'xs'} x={'368px'} y={'33px'} width={'56px'} tabIndex={'1'} align={'left'} data={this.state.data?.sub_version_no}/>
                        <Label jsxId={'Label724'} sm={true} absolute={true} x={'256px'} y={'33px'} width={'104px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Sub Version No.'}/>
                        <Input jsxId={'est_release_date'} field={'est_release_date'} absolute={true} size={'xs'} x={'136px'} y={'33px'} width={'104px'} tabIndex={'2'} align={'center'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.est_release_date?moment(this.state.data?.est_release_date).format('MM-DD-YYYY'):''}/>
                        <Label jsxId={'Label728'} sm={true} absolute={true} x={'20px'} y={'33px'} width={'108px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Release Date'}/>
                        <Button jsxId={'btn1Post'} absolute={true} size={'xs'} x={'684px'} y={'17px'} width={'52px'} height={'32px'} outline={true} theme={'danger'}>
                            Post
                        </Button>
                        <Button jsxId={'btn1Undo'} absolute={true} size={'xs'} x={'632px'} y={'17px'} width={'52px'} height={'32px'} outline={true} theme={'info'}>
                            Undo
                        </Button>
                        <CTable jsxId={'sub_efc_release_list_work_sel'} absolute={true} x={'20px'} y={'69px'} width={'714px'} height={'382px'} scroll={true} headerTheme={'light'} hover={true} select={false} sm={true} fontSm={true} source={'v_efc_release_new_list_work'} data={this.state.tableData} ref={c=>this.queryTable=c} page={this.state.page} dataCount={this.state.dataCount} onSelectPage={this.getData} showNumbers={50} onFilter={this.filterHandler} onSort={this.sortHandler}>
                            <Table.Header field={'sel_sw'} text={'Sel'} width={'32px'} align={''}/>
                            <Table.Header field={'work_id'} text={'Seq'} width={'40px'} align={'center'} onFormat={val=><u className='text-primary print-default'>{val}</u>} onDoubleClick={this.open('f_wrk','work_id')}/>
                            <Table.Header field={'product_code'} text={'Product'} width={'44px'} align={'left'}/>
                            <Table.Header field={'work_type'} text={'Type'} width={'84px'} align={'left'}/>
                            <Table.Header field={'work_subject'} text={'Project Subject'} width={'164px'} align={'left'}/>
                            <Table.Header field={'work_desc'} text={'Description'} width={'112px'} align={'left'}/>
                            <Table.Header field={'efc_sys_codes'} text={'Sys'} width={'64px'} align={'center'}/>
                            <Table.Header field={'initiator'} text={'Initiator'} width={'64px'} align={'left'}/>
                            <Table.Header field={'close_date'} text={'Close Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                            <Table.Header field={'assign_to_code'} text={'Handle By'} width={'60px'} align={'left'}/>
                            <Table.Header field={'assign_date'} text={'Handle Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                            <Table.Header field={'project_note'} text={'Project Note'} width={'208px'} align={'left'}/>
                            <Table.Header field={'created_by_code'} text={'Created By'} width={'72px'} align={'left'}/>
                            <Table.Header field={'created_date'} text={'Created Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                            <Table.Header field={'modified_by_code'} text={'Modified By'} width={'76px'} align={'left'}/>
                            <Table.Header field={'modified_date'} text={'Modified Date'} width={'84px'} align={'center'} onFormat={val=>val?moment(val).format('MM-DD-YYYY'):''}/>
                        </CTable>
                    </TabsContent>
                    <TabsContent jsxId={' Note'} id={' Note'} text={' Note'}>
                        <Box jsxId={'box_00_11'} absolute={true} x={'20px'} y={'89px'} width={'720px'} height={'368px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                        <TextArea jsxId={'release_note'} field={'release_note'} absolute={true} size={'xs'} x={'36px'} y={'125px'} width={'688px'} tabIndex={'0'} height={'312px'} data={this.state.data?.release_note}/>
                        <Label jsxId={'Label706'} sm={true} absolute={true} x={'36px'} y={'101px'} width={'132px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Release Note'}/>
                        <Input jsxId={'created_by_code'} field={'created_by_code'} absolute={true} size={'xs'} x={'180px'} y={'21px'} width={'124px'} tabIndex={'1'} align={'left'} data={this.state.data?.created_by_code}/>
                        <Label jsxId={'Label803'} sm={true} absolute={true} x={'40px'} y={'21px'} width={'132px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Created By - Date'}/>
                        <Input jsxId={'created_date'} field={'created_date'} absolute={true} size={'xs'} x={'312px'} y={'21px'} width={'124px'} tabIndex={'2'} align={'left'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.created_date}/>
                        <Input jsxId={'modified_by_code'} field={'modified_by_code'} absolute={true} size={'xs'} x={'180px'} y={'53px'} width={'124px'} tabIndex={'3'} align={'left'} data={this.state.data?.modified_by_code}/>
                        <Label jsxId={'Label804'} sm={true} absolute={true} x={'40px'} y={'53px'} width={'132px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Modified By - Date'}/>
                        <Input jsxId={'modified_date'} field={'modified_date'} absolute={true} size={'xs'} x={'312px'} y={'53px'} width={'124px'} tabIndex={'4'} align={'left'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.modified_date}/>
                        <Box jsxId={'Box803'} absolute={true} x={'20px'} y={'9px'} width={'720px'} height={'80px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                    </TabsContent>
                </Tabs>
                <Box jsxId={'Boxheadline'} absolute={true} x={'0px'} y={'0px'} width={'616px'} height={'27px'} backColor={'rgb(53,88,117)'} borderColor={'rgb(0,0,0)'} borderWidth={'1px'}/>
                <Label jsxId={'efc_release_id'} sm={true} absolute={true} x={'80px'} y={'4px'} width={'52px'} height={'19px'} align={'left'} color={'rgb(255,255,255)'} field={'efc_release_id'} text={this.state.data?.efc_release_id}/>
                <Label jsxId={'lbl_efc_branch_id'} sm={true} absolute={true} x={'16px'} y={'4px'} width={'60px'} height={'19px'} align={'left'} color={'rgb(255,255,255)'} text={'Seq No.'}/>
                <Button jsxId={'btn0Add'} onClick={this.newData} absolute={true} size={'xs'} x={'700px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'folder-plus'} theme={'dark'}>
                    
                </Button>
                <Button jsxId={'btn0Delete'} onClick={this.deleteData} absolute={true} size={'xs'} x={'672px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'times-circle'} theme={'danger'}>
                    
                </Button>
                <Button jsxId={'btn0Clone'} absolute={true} size={'xs'} x={'644px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'clone'} theme={'dark'}>
                    
                </Button>
                <Button jsxId={'btn0Reload'} onClick={this.showHandler} absolute={true} size={'xs'} x={'616px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'sync-alt'} theme={'success'}>
                    
                </Button>
                {this.state.isEdit?
                    <Button jsxId={'btn0Edit'} onClick={this.saveData} absolute={true} size={'xs'} x={'728px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'edit'} theme={'success'}></Button>:
                    <Button jsxId={'btn0Save'} onClick={this.saveData} absolute={true} size={'xs'} x={'728px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'save'} theme={'success'}></Button>}
                <Box jsxId={'BoxhearlineButton'} absolute={true} x={'616px'} y={'0px'} width={'140px'} height={'27px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <Label jsxId={'status_desc'} sm={true} absolute={true} x={'220px'} y={'4px'} width={'96px'} height={'19px'} align={'left'} color={'rgb(255,255,255)'} field={'status_desc'} text={this.state.data?.status_desc}/>
                <Label jsxId={'lbl_status_id'} sm={true} absolute={true} x={'164px'} y={'4px'} width={'52px'} height={'19px'} align={'left'} color={'rgb(255,255,255)'} text={'Status'}/>
				<WModal ref={c=>this.modal=c}/>
            </Form>
        );
    }
}

export default FEfcReleaseNew;
